<template>
  <view>
  <view v-for="(course,index) in list" :key="index" @click="playCourse(course.id)" class="course-preview">
    <view class="course-img-wrapper">
      <image :src="course.image" mode="aspectFill" class="course-img"/>
      <view class="course-play-icon">
        <view class="play-icon">
          ▶
        </view>
      </view>
    </view>
    <view class="course-category">{{ course.category }}</view>
    <view class="course-info">
      <view class="course-title">{{ course.title }}</view>
      <view class="course">
        <view class="course-teacher">{{ course.teacher }}</view>
        <view class="course-student-num">
          <text>{{ Math.floor(course.sales) + Math.floor(course.ficti) || 0 }}</text>
          人已学
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  name: "card",
  props:['list'],
  methods:{
    playCourse(id) {
      uni.navigateTo({
        url: '/pages/discover/courseDetails/index?id=' + id
      })
    }
  }
}
</script>

<style scoped lang="scss">
// 定义变量
$primary-color: #a56c3c;
$text-medium: #666;
$text-light: #999;
$border-color: rgba(179, 169, 169, 0.1);

// 定义混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin absolute {
  position: absolute;
  top: 50%;
  left: 50%;
}
// 课程预览区
.course-preview {
  border: 1px solid $border-color;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;

  .course-category {
    position: absolute;
    top: 0;
    right: 0;
    background-color: $primary-color;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
  }

  .course-img-wrapper {
    position: relative;
    width: 100%;
    height: 400rpx;

    .course-img {
      width: 100%; /* 图片宽度撑满容器 */
      height: 100%; /* 图片高度撑满容器 */
      object-fit: cover; /* 图片等比缩放，填满容器，可能裁剪 */
    }

    .course-play-icon {
      @include flex-center;
      @include absolute;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      cursor: pointer;

      .play-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #8b5834;
        text-align: center;
        line-height: 40px;
        font-size: 24px;
        color: #fff;
        padding-left: 4px;
      }
    }
  }
  .course-info {
    padding: 15px;

    .course-title {
      font-size: 16px;
      margin: 8px 0;
      font-weight: bold;
    }
    .course{
      @include flex-center;
      justify-content: space-between;


      .course-teacher {
        color: $primary-color;
        font-size: 14px;
      }

      .course-student-num {
        color: $text-light;
        font-size: 14px;
      }
    }
  }
}

</style>